<template>
  <div class="chargingRule-page">
    <breadcrumb />
    <div class="search-container">
      <Search @search="getSearchParams" />
    </div>
    <div class="table-container" v-for="item in table.data" :key="item.id">
      <Buttons
        :buttons="item"
        @buttons="getButtonsParams"
        @update-lot-name-list="getData"
      />
      <Table :tableData="item.list" :loading="table.loading" @table="getTableParams" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef } from "vue";
import breadcrumb from "@/components/breadcrumb/index.vue";
import Search from "./components/search.vue";
import Buttons from "./components/buttons.vue";
import Table from "./components/table.vue";
import { getCparkRule } from "./request.js";

import { useRouter } from "vue-router";

const router = useRouter();

// 搜索
const searchModel = ref({});
const resultMapOption = {
  0: "全日期",
  1: "工作日",
};

// 搜索操作
const getSearchParams = (value) => {
  console.log(value);
  if (value.operation === 3) {
    addData();
  } else {
    searchModel.value = value;
    getData();
  }
};

// 新增按钮
const addData = () => {
  router.push("/park/config/chargingRule/add");
};

// 表格
const table = reactive({
  data: [],
  loading: true,
});

const getData = async () => {
  table.loading = true;
  // const result = await getCparkRule({
  //   ruleName: searchModel.value.ruleName,
  //   lotName: searchModel.value.lotName,
  // });
  // console.log('result--->', result);
  await getCparkRule({
    ruleName: searchModel.value.ruleName,
    lotName: searchModel.value.lotName,
  }).then((res) => {
    // console.log(res);
    if (res.data.code === 0) {
      let data = res.data.result.items;
      let resuleData = [];
      // console.log(data);
      data.forEach((item) => {
        // console.log(item);
        item.ruleItemList.forEach((ruleItem) => {
          // console.log(ruleItem);
          let data = {
            id: item.id,
            name: item.name,
            lotNameList: item.lotNameList,
            dateType:
              ruleItem.dateType == 0
                ? "全日期"
                : ruleItem.dateType == 1
                ? "工作日"
                : "非工作日",
            endTime: ruleItem.endTime,
            freeTime: ruleItem.freeTime,
            max: ruleItem.max > 0 ? ruleItem.max : "不封顶",
            maxType:
              ruleItem.maxType == 0
                ? "不封顶"
                : ruleItem.maxType == 1
                ? "日封顶"
                : "24时封顶",
            method: ruleItem.method == 1 ? "按时" : "按次",
            periodMax: ruleItem.periodMax > 0 ? ruleItem.periodMax : "不封顶",
            remark: ruleItem.remark,
            startTime: ruleItem.startTime,
            vehicleType:
              ruleItem.vehicleType == 0
                ? "全车型"
                : ruleItem.vehicleType == 1
                ? "大型车"
                : ruleItem.vehicleType == 2
                ? "小型车"
                : "新能源",
          };
          resuleData.push(data);
        });
      });
      const grouped = {};
      resuleData.forEach((item) => {
        if (!grouped[item.id]) {
          grouped[item.id] = {
            id: item.id,
            name: item.name,
            list: [],
            listLength: 0,
            lotNameList: item.lotNameList,
          };
        }
        const { id, name, ...otherProps } = item;
        grouped[item.id].list.push(otherProps);
        grouped[item.id].listLength = grouped[item.id].list.length / 2;
      });
      table.data = Object.values(grouped);
      console.log("table.data ===>", table.data);
      table.loading = false;
    }
  });
};

getData();
</script>

<style lang="less" scoped>
.chargingRule-page {
  .search-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px 24px 8px 24px;
    background: #fff;
    border-radius: 6px;
  }
  .table-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px;
    background: #fff;
    border-radius: 6px;
  }
}
</style>
